<template>
    <addEditEBookView ref="addEditEBookView"/>
    <addFileView ref="addFileView"/>
    <el-main>
        <div class="app-table">
            <div class="app-body">
                <div class="app-search">
                    <el-form :inline="true" class="demo-form-inline" v-model="form">
                                    <!-- <el-form-item label="期刊编号">
                                        <el-input
                                                placeholder="请输入期刊编号"
                                                v-model="form.code"
                                        ></el-input>
                                    </el-form-item> -->
                                    <el-form-item label="期刊分类">
                                     
                                        <el-select
                                        v-model="form.typeId"
                                        clearable
                                        placeholder="请选择期刊分类"
                                        style="width:190px;"
                                        >
                                            <el-option v-for=" item in typeList" :value="item.id" :label="item.name"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="期刊名称">
                                        <el-input
                                                placeholder="请输入期刊名称"
                                                v-model="form.title"
                                        ></el-input>
                                    </el-form-item>
                                    <el-form-item label="出版社">
                                        <el-input
                                                placeholder="请输入出版社"
                                                v-model="form.press"
                                        ></el-input>
                                    </el-form-item>
                                    <el-form-item label="期刊作者">
                                        <el-input
                                                placeholder="请输入期刊作者"
                                                v-model="form.author"
                                        ></el-input>
                                    </el-form-item>
                                  
                        <el-form-item>
                            <el-button plain type="primary" @click="onSubmit" @keyup.enter="searchEnter">搜索</el-button>
                            <el-button plain type="success" @click="add">添加</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <el-table
                        size="small"
                        :data="list"
                        style="width: 100%"
                        border
                        :row-class-name="tableRowClassName"
                >
                            <el-table-column prop="id" label="id"/>
                            <el-table-column prop="code" label="期刊编号"/>
                            <el-table-column prop="title" label="期刊名称"/>
                            <el-table-column prop="typeName" label="期刊分类"/>
                            <el-table-column prop="press" label="出版社"/>
                            <el-table-column prop="author" label="期刊作者"/>
                            <el-table-column prop="content" label="期刊介绍"/>
                            <el-table-column prop="isEffect" label="是否有效"/>
                            <el-table-column prop="imageUrl" label="封面图片"/>
                            <el-table-column prop="sortNum" label="权重"/>
                    <el-table-column label="操作" width="140px">
                        <template  #default="scope">
                            <el-button
                                    size="small"
                                    type="success"
                                    @click="editEBook(scope.row)"
                            >编辑
                            </el-button
                            >
                            <el-button
                                    size="small"
                                    type="danger"
                                    @click="deleteEBook(scope.row.id)"
                            >删除
                            </el-button
                            >
                        </template>
                    </el-table-column>
                    <template v-slot:empty>
                        <el-empty description="暂无数据"></el-empty>
                    </template>
                </el-table>
                <el-config-provider :locale="locale">
                    <el-pagination
                            :total="total"
                            :page-size="limit"
                            :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
                            layout="total, sizes, prev, pager, next, jumper"
                            @size-change="changePageSize"
                            @current-change="changeCurrentPage"
                    >
                    </el-pagination>
                </el-config-provider>
            </div>
            <bottomView></bottomView>

        </div>
    </el-main>
</template>
<script>
    import addEditEBookView from "@/components/eBook/addEditEBook.vue";
    import addFileView from "@/components/addExcelFile.vue";
    import {ElConfigProvider, ElMessageBox, ElMessage} from "element-plus";
    import zhCn from "element-plus/lib/locale/lang/zh-cn";
    import {httpService} from "@/utils/httpService";
    import {Picture as IconPicture, Upload} from "@element-plus/icons-vue";
    import bottomView from "@/components/bottom.vue";

    export default {
        name: "EBookListView",
        data() {
            return {
                type: 0,
                title: "",
                page: 0,
                pageSize: 10,
                total: 0,
                limit: 10,
                list: [],
                typeList:[],
                form: {
                    typeId:"",
                    code: "",
                    title: "",
                    press: "",
                    author: "",
                    imageUrl: "",
                },
            };
        },
        components: {
            addEditEBookView,
            addFileView,
            IconPicture,
            ElConfigProvider,
            ElMessageBox,
            ElMessage, Upload,bottomView
        },
        setup() {
            return {
                locale: zhCn,
            };
        },
        mounted() {
            this.getEBookList();
            this.getEBookTypeList();
        },
        watch: {
            $route() {
                this.getEBookList();
                this.getEBookTypeList();
            },
        },
        methods: {
            getEBookTypeList() {
                httpService(
                    "/javaApi/eBookType/list/1/1000",
                    {
                    },
                    "get"
                ).then((data) => {
                    this.typeList = data.object.list;
                });
            },
            searchEnter: function (e) {
                // 使用 which 和 keyCode 属性来解决兼容问题
                var keyCode = window.event ? e.keyCode : e.which;
                var val = e.target.value;
                if (keyCode == 13 && val) {
                    this.getEBookList();
                }
            },
            add() {
                this.$refs.addEditEBookView.title = "添加电子期刊"
                this.$refs.addEditEBookView.typeList = this.typeList
                this.$refs.addEditEBookView.dialogFormVisible = true;
            },
            editEBook(obj) {
                this.$refs.addEditEBookView.title = "修改信息"
                this.$refs.addEditEBookView.getEBookById(obj.id);
                this.$refs.addEditEBookView.dialogFormVisible = true;
            },
            deleteEBook(id) {
                ElMessageBox.confirm("确定要删除本条记录吗？", "提醒", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        httpService("/javaApi/eBook/deleteById", "id=" + id, "post").then(
                            (data) => {
                                if (data.code == 200) {
                                    ElMessage.success(data.message);
                                    this.getEBookList();
                                } else {
                                    ElMessage.error(data.message);
                                }
                            }
                        );
                    })
                    .catch(() => {
                    });
            },
            reloadData() {
                this.page = 1;
                this.getEBookList()
            },
            importExcel() {
                this.$refs.addFileView.dialogFormVisible = true;
                this.$refs.addFileView.title = "批量导入电子期刊";
                this.$refs.addFileView.uploadApiUrl = "/javaApi/eBook/importExcel";
            },
            exportExcel() {
                httpService(
                    "/javaApi/eBook/exportExcel",
                    {
                        "code": this.form.code,
                        "title": this.form.title,
                        "press": this.form.press,
                        "author": this.form.author,
                        "typeId": this.form.typeId,
                        "imageUrl": this.form.imageUrl,
                    },
                    "get"
                ).then((data) => {
                    if (data.code == 200) {
                        window.open(data.message, '_blank')
                    }
                });
            },
            onSubmit() {
                this.getEBookList();
            },
            // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
            changePageSize(size) {
                this.pageSize = size;
                this.limit = size;
                this.getEBookList();
            },

            // 改变页码，page：回调参数，表示当前选中的“页码”
            changeCurrentPage(page) {
                this.page = page;
                this.getEBookList();
            },
            tableRowClassName({row, rowIndex}) {
                return "";
            },
            getEBookList() {
                httpService(
                    "/javaApi/eBook/list/" + this.page + "/" + this.pageSize,
                    {
                        "code": this.form.code,
                        "title": this.form.title,
                        "press": this.form.press,
                        "author": this.form.author,
                        "imageUrl": this.form.imageUrl,
                        "typeId": this.form.typeId,

                    },
                    "get"
                ).then((data) => {
                    this.list = data.object.list;
                    this.total = data.object.total;
                    this.pageCount = data.object.pages;
                });
            },
        },
    };
</script>
<style scoped>
    .el-main {
        padding: 0px;
        text-align: left;
    }

    .teacher-content {
        width: 100%;
    }

    .app-table {
        background: #eff3f5;
        padding: 10px;
    }

    .app-separator {
        padding-top: 10px;
        padding-bottom: 20px;
        padding-left: 10px;
    }

    .app-body {
        background: white;
        padding: 20px 20px 10px 20px;
        margin-bottom: 10px;
        min-height: calc(100vh - 204px);
    }

    .el-table .warning-row {
        --el-table-tr-bg-color: var(--el-color-warning-lighter);
    }

    .el-table .success-row {
        --el-table-tr-bg-color: var(--el-color-success-lighter);
    }

    .el-pagination {
        text-align: center;
        margin-top: 10px;
    }
</style>

